<template>
	<view class="zg-area">
		<view class="card1">
			<view class="card1-top">
				<view class="ct-img">
					<image :src="`${shopImgUrl}${details.scCover}`" style="border-radius: 12rpx;" mode="aspectFill"></image>
				</view>
				<view class="ct-info">
					<view class="cti-title">
						{{details.scName || '店铺名称'}}
					</view>
					<view class="cti-des">
						<text>销量：{{ handleSales(details.scSales) }}</text>
						<text>评分：{{details.scScore || 0}}</text>
					</view>
				</view>
			</view>
			<view class="card1-content">
				<template v-if="details.scDescription">
					<rich-text :nodes="details.scDescription"></rich-text>
				</template>
				<view v-else>
					<text>暂无介绍</text>
				</view>
			</view>
		</view>
		<view class="card2">
			<view class="card2-row" @click="makePhoneCall(details.scPhone)">
				<view class="card2-row-left">
					客服电话
				</view>
				<view class="card2-row-right">
					{{details.scPhone || ''}}
				</view>
			</view>
			<view class="card2-row">
				<view class="card2-row-left">
					地址
				</view>
				<view class="card2-row-right">
					{{details.scAddr || ''}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sid: '',
				details: {}
			}
		},
		onLoad(params) {
			console.log(params);
			this.sid = params.sid
			if (this.sid) this.getDetails()
		},
		methods: {
			// 拨打电话
			makePhoneCall(tel) {
				uni.makePhoneCall({
					phoneNumber: tel //仅为示例
				});
			},
			// 获取店铺详情
			getDetails() {
				this.$http.post(this.$api.shop_shop_1, {}, {
					params: {
						id: this.sid
					}
				}).then(res => {
					if (res.code === 200) {
						this.details = res.data
						this.details.scDescription = this.parseRichImgStyle(this.details.scDescription)
					} else {
						this.details = {}
					}
				}).catch(() => {
					this.details = {}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.card1 {
		background-color: #fff;
		padding: 30rpx;
	}

	.card1-top {
		display: flex;
		align-items: center;
	}

	.ct-img {
		flex-shrink: 0;
		width: 80rpx;
		height: 80rpx;
		margin-right: 20rpx;
		overflow: hidden;
	}

	.ct-info {}

	.cti-title {
		font-size: 26rpx;
		line-height: 2;
	}

	.cti-des {
		font-size: 26rpx;

		text {
			margin-right: 20rpx;
		}
	}

	.card1-content {
		padding: 30rpx 0 0;

		view {
			color: #aaa;
			font-size: 24rpx;
		}
	}

	.card2 {
		margin: 30rpx 0;
	}

	.card2-row {
		display: flex;
		justify-content: space-between;
		padding: 30rpx;
		background-color: #fff;

		&:not(:nth-last-of-type(1)) {
			border-bottom: 1px solid #f1f1f1;
		}

	}

	.card2-row-right {
		max-width: 400rpx;
		word-break: break-word;
	}
</style>
